<template>
  <div class="server">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>cpu使用信息</span> <span>CPU核数: {{ cpuInfo.NumberOfCPUCores }} 核</span>
      </div>
      <div class="cpuInfo">
        <div class="cpuInfo-item">
          <el-progress type="circle" :percentage="cpuInfo.currentIdleRate" stroke-linecap="butt" :stroke-width="23"
            :width="180" :color="colors" />
          <div class="cpuInfo-title">CPU当前空闲率</div>
        </div>
        <div class="cpuInfo-item">
          <el-progress type="circle" :percentage="cpuInfo.currentWaitingRate" stroke-linecap="butt" :stroke-width="23"
            :width="180" :color="colors" />
          <div class="cpuInfo-title">CPU当前等待率</div>
        </div>
        <div class="cpuInfo-item">
          <el-progress type="circle" :percentage="cpuInfo.CPUUserUsage" stroke-linecap="butt" :stroke-width="23"
            :width="180" :color="colors" />
          <div class="cpuInfo-title">CPU用户使用率</div>
        </div>
        <div class="cpuInfo-item">
          <el-progress type="circle" :percentage="cpuInfo.CPUSystemUtilization" stroke-linecap="butt" :stroke-width="23"
            :width="180" :color="colors" />
          <div class="cpuInfo-title">CPU系统使用率</div>
        </div>
        <!-- <div class="cpuInfo-item">
        </div> -->
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>系统内存使用情况</span>
      </div>
      <div class="memoryInfo">
        <div class="memoryInfo-item">
          <div class="memoryInfo-title">JVM初始总内存: {{ memoryInfo.JVMInitialTotalMemory }}M</div>
          <div class="memoryInfo-value">
            <div class="memoryInfo-left"
              :style="{ left: memoryInfo.MemoryUsedByJVM / memoryInfo.VMMaximumAvailableMemory * 100 - 5 + '%' }">
              JVM已使用的内存:
              <br />
              {{ memoryInfo.MemoryUsedByJVM }} M
            </div>
            <div class="memoryInfo-left" :style="{ right: 0 }">
              JVM最大可用内存:
              <br />
              {{ memoryInfo.VMMaximumAvailableMemory }} M
            </div>
            <div
              :style="{ 'width': memoryInfo.MemoryUsedByJVM / memoryInfo.VMMaximumAvailableMemory * 100 + '%', height: '100%', background: '#bc8300', 'border-radius': '5px' }">

            </div>
          </div>
        </div>
        <div class="memoryInfo-item">
          <div class="memoryInfo-title">总的物理内存: {{ memoryInfo.TotalPhysicalMemory }}G</div>
          <div class="memoryInfo-value">
            <div class="memoryInfo-left"
              :style="{ left: memoryInfo.PhysicalMemoryUsed / memoryInfo.TotalPhysicalMemory * 100 - 5 + '%' }">
              已使用的物理内存:
              <br />
              {{ memoryInfo.PhysicalMemoryUsed }} G
            </div>
            <div class="memoryInfo-left" :style="{ right: 0 }">
              总的物理内存:
              <br />
              {{ memoryInfo.TotalPhysicalMemory }} G
            </div>
            <div
              :style="{ 'width': memoryInfo.PhysicalMemoryUsed / memoryInfo.TotalPhysicalMemory * 100 + '%', height: '100%', background: '#bc8300', 'border-radius': '5px' }">

            </div>
          </div>
        </div>
        <div class="memoryInfo-item">
          <div class="memoryInfo-title">初始的总内存: {{ memoryInfo.InitialTotalMemory }}M</div>
          <div class="memoryInfo-value">
            <div class="memoryInfo-left"
              :style="{ left: memoryInfo.MemoryUsed / memoryInfo.MaximumAvailableMemory * 100 - 5 + '%', 'border-radius': '5px' }">
              已使用的内存:
              <br />
              {{ memoryInfo.MemoryUsed }} M
            </div>
            <div class="memoryInfo-left" :style="{ right: 0 }">
              最大可用内存:
              <br />
              {{ memoryInfo.MaximumAvailableMemory }} M
            </div>

            <div
              :style="{ 'width': memoryInfo.MemoryUsed / memoryInfo.MaximumAvailableMemory * 100 + '%', height: '100%', background: '#bc8300', 'border-radius': '5px' }">

            </div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>设备信息</span>
      </div>
      <div class="deviceInfo">
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">计算机名 : {{ deviceInfo['计算机名'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">计算机域名: {{ deviceInfo['计算机域名'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">操作系统的名称 : {{ deviceInfo['操作系统的名称'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">操作系统的构架 : {{ deviceInfo['操作系统的构架'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">操作系统的版本 : {{ deviceInfo['操作系统的版本'] }}</div>
        </div>
        <!-- <div>class="deviceInfo-item">
        </div> -->
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">JVM可以使用的处理器个数 : {{ deviceInfo['JVM可以使用的处理器个数'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">JVM可以使用的剩余内存 : {{ deviceInfo['JVM可以使用的剩余内存'] / 1024 / 1024 }} M</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">JVM可以使用的总内存 : {{ deviceInfo['JVM可以使用的总内存'] / 1024 / 1024 }} M</div>
        </div>
        <!-- <div class="deviceInfo-item">
        </div> -->
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">Java的虚拟机实现名称 : {{ deviceInfo['Java的虚拟机实现名称'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">Java的虚拟机实现版本 : {{ deviceInfo['Java的虚拟机实现版本'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">Java的虚拟机规范名称 : {{ deviceInfo['Java的虚拟机规范名称'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">Java的虚拟机规范版本 : {{ deviceInfo['Java的虚拟机规范版本'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">Java的运行环境版本 : {{ deviceInfo['Java的运行环境版本'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">Java运行时环境规范名称 : {{ deviceInfo['Java运行时环境规范名称'] }}</div>
        </div>
        <div class="deviceInfo-item">
          <div class="deviceInfo-title">Java运行时环境规范版本 : {{ deviceInfo['Java运行时环境规范版本'] }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      serverObj: {
        cpu使用信息: {
          cpu用户使用率: "10.44%",
          cpu核数: 4,
          cpu当前空闲率: "88.94%",
          cpu当前等待率: "0%",
          cpu系统使用率: "0.61%"
        },
        系统内存使用情况: {
          最大可用内存: 129761280,
          已使用的内存: 56533240,
          初始的总内存: 67108864,
          JVM初始总内存: "64M",
          JVM已使用的内存: "53.9M",
          JVM最大可用内存: "123.8M",
          总的物理内存: "31.48G",
          已使用的物理内存: "26.53G",
          剩余的物理内存: "4.95G"
        },
        设备信息: {
          "Java的虚拟机规范版本 ": "1.8",
          JVM可以使用的剩余内存: 43142920,
          "Java的运行环境版本 ": "1.8.0_131",
          "操作系统的版本 ": "6.1",
          JVM可以使用的处理器个数: 4,
          "Java的虚拟机实现名称 ": "Java HotSpot(TM) Client VM",
          "Java运行时环境规范名称 ": "Java Platform API Specification",
          计算机域名: "IZGMVC1CIFP2QMZ",
          "Java的虚拟机规范名称 ": "Java Virtual Machine Specification",
          "操作系统的名称 ": "Windows Server 2008 R2",
          JVM可以使用的总内存: 99676160,
          "Java的虚拟机实现版本 ": "25.131-b11",
          "操作系统的构架 ": "x86",
          计算机名: "iZgmvc1cifp2qmZ",
          "Java运行时环境规范版本 ": "1.8"
        }
      },
      colors: [
        { color: "#6f7ad3", percentage: 20 },
        { color: "#1989fa", percentage: 40 },
        { color: "#5cb87a", percentage: 60 },
        { color: "#e6a23c", percentage: 80 },
        { color: "#f56c6c", percentage: 100 }
      ],
      cpuInfo: {},
      memoryInfo: {},
      deviceInfo: {}
    };
  },
  mounted() {
    this.query();
    this.timr = setInterval(() => {
      this.query();
    }, 5 * 1000)
  },
  destroyed() {
    clearInterval(this.timr)
  },
  methods: {
    async query() {
      const { data: res } = await axios({
        method: "get",
        url: this.$webSerUrlPro + "config/loginLog/systemInfo",
        data: {},
        params: {}
      });
      let data = res.data;
      this.serverObj = data;
      if (this.serverObj["cpu使用信息"]) {
        let server = this.serverObj["cpu使用信息"];
        this.cpuInfo = {
          currentIdleRate: JSON.parse(
            server["cpu当前空闲率"].substring(
              0,
              server["cpu当前空闲率"].length - 1
            )
          ),
          currentWaitingRate: JSON.parse(
            server["cpu当前等待率"].substring(
              0,
              server["cpu当前等待率"].length - 1
            )
          ),
          CPUUserUsage: JSON.parse(
            server["cpu用户使用率"].substring(
              0,
              server["cpu用户使用率"].length - 1
            )
          ),
          CPUSystemUtilization: JSON.parse(
            server["cpu系统使用率"].substring(
              0,
              server["cpu系统使用率"].length - 1
            )
          ),
          NumberOfCPUCores: server["cpu核数"]
        };
        // console.log(this.cpuInfo)
      }
      if (this.serverObj["系统内存使用情况"]) {
        let server = this.serverObj["系统内存使用情况"];
        this.memoryInfo = {
          JVMInitialTotalMemory: JSON.parse(
            server["JVM初始总内存"].substring(
              0,
              server["JVM初始总内存"].length - 1
            )
          ),
          MemoryUsedByJVM: JSON.parse(
            server["JVM已使用的内存"].substring(
              0,
              server["JVM已使用的内存"].length - 1
            )
          ),
          VMMaximumAvailableMemory: JSON.parse(
            server["JVM最大可用内存"].substring(
              0,
              server["JVM最大可用内存"].length - 1
            )
          ),
          RemainingPhysicalMemory: JSON.parse(
            server["剩余的物理内存"].substring(
              0,
              server["剩余的物理内存"].length - 1
            )
          ),
          PhysicalMemoryUsed: JSON.parse(
            server["已使用的物理内存"].substring(
              0,
              server["已使用的物理内存"].length - 1
            )
          ),
          TotalPhysicalMemory: JSON.parse(
            server["总的物理内存"].substring(
              0,
              server["总的物理内存"].length - 1
            )
          ),
          InitialTotalMemory: server["初始的总内存"] / 1024 / 1024,
          MemoryUsed: server["已使用的内存"] / 1024 / 1024,
          MaximumAvailableMemory: server["最大可用内存"] / 1024 / 1024
          // NumberOfCPUCores: server["cpu核数"]
        };
        // console.log(this.memoryInfo)
      }
      if (this.serverObj["设备信息"]) {
        let server = this.serverObj["设备信息"];
        this.deviceInfo = {
          ...server
        };
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/styles/variables.scss";

::v-deep .el-card {
  background-color: #062d3c;
  border-color: #136270;
  margin-bottom: 20px;

  .el-card__header {
    border-bottom: 1px dashed #ebeef5;
    color: $textColor;
  }

  .el-card__body {
    color: $textColor;
  }
}

.cpuInfo {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  align-content: center;

  .cpuInfo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;

    .cpuInfo-title {
      margin-top: 10px;
    }
  }
}

.memoryInfo {
  width: 100%;

  .memoryInfo-item {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    font-size: 18px;
    letter-spacing: 1px;
    flex-wrap: wrap;

    .memoryInfo-value {
      width: 100%;
      background: #ebeef5;
      height: 25px;
      position: relative;
      border-radius: 5px;

      .memoryInfo-left {
        border-radius: 5px;

        position: absolute;
        top: -41px;
        color: red;

        &:nth-child(2) {
          color: #24d698;
        }
      }
    }
  }
}

.deviceInfo {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-self: baseline;

  .deviceInfo-item {
    width: 50%;
    height: 40px;
    font-size: 18px;
    letter-spacing: 1px;
    display: flex;
    align-items: flex-end;
    flex-direction: row;
    flex-wrap: wrap;

    .deviceInfo-value {
      width: 100%;
      background: #ebeef5;
      height: 25px;
      position: relative;
      border-radius: 5px;

      .deviceInfo-left {
        border-radius: 5px;

        position: absolute;
        top: -41px;
        color: red;

        &:nth-child(2) {
          color: #24d698;
        }
      }
    }
  }
}
</style>
